<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>留言板</h1>
    <div>
        <ul style="color: darkturquoise; width:300px; list-style:none;">
            <li></li>
        </ul>
        <span></span>
    </div>
    <br>
    <textarea style="width:250px; height:300px; font-size: 18px; " id="text">
    </textarea>
    <button onclick="btn()">发布</button>
</body>
<script>
    window.onload = function () {
        show()
    }
    function show() {
        var data = localStorage.getItem('obj') //?? ""
        data = JSON.parse(data)
        var str = ""
        for (i in data) {
            str += `<ul>
                        <li>${data[i].text}<br><span>发布时间：${data[i].time}</span><br></li>
                    </ul>`
        }
        document.getElementsByTagName('ul')[0].innerHTML = str
    }
    function btn() {
        if (localStorage.getItem('obj') == null) {
            localStorage.obj = JSON.stringify([])
        }
        var t = document.getElementById("text").value
        var data = JSON.parse(localStorage.getItem('obj'))
        data.unshift({ text: t, time: getNowTime() })
        data = JSON.stringify(data)
        localStorage.setItem('obj', data)
        show()
    }

    function getNowTime() {
        var dtime = new Date();
        var nian = dtime.getFullYear(),
            yue = dtime.getMonth() + 1,
            day = dtime.getDate(),
            hours = dtime.getHours(),
            fen = dtime.getMinutes(),
            miao = dtime.getSeconds()
        return nian + "-" + yue + "-" + day + " " + hours + ":" + fen + ":" + miao
    }
</script>

</html>